<!--  -->
<template>
  <div>
    <header>
      <van-nav-bar
        title="支付完成预约"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
   
      />
    </header>
    <div class="a1">
      <ul>
        <li>老年人体检套餐豪华版(女)</li>
        <li>￥998</li>
      </ul>
    </div>
    <div class="a1">
      <ul>
        <li>脑部CT</li>
        <li>￥300</li>
      </ul>
    </div>
    <div class="a1">
         <ul>
        <li>心电图</li>
        <li>￥99</li>
      </ul>
    </div>
     <div class="a1 a4">
         <ul>
        <li>合计</li>
        <li>￥1397</li>
      </ul>
    </div>
 
   <template>
     <div>
        <van-cell title="选择单个日期" :value="date" @click="show = true" />
<van-calendar v-model="show" @confirm="onConfirm" />
     </div>
   </template>

 

    <footer @click="toComplete">
      立即订购
    </footer>
  </div>
</template>

<script>

import Vue from 'vue'
import { Calendar } from 'vant';
import { ActionSheet } from 'vant';
import { Toast } from 'vant';
Vue.use(Calendar);
Vue.use(ActionSheet);

export default {
 
      data() {
      return {
        show: false,
      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
       date: '',
      show: false,
      };
    },
  methods: {
    onClickLeft(){
       this.$router.push('./Package')
    },
    toComplete(){
this.$router.push('./Complete')
    },
     onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },
      formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
  },
};

//   components: {},

//   computed: {},

//   mounted: {},

//   methods: {}
</script>
<style lang="scss" scoped>
.a1 {
 
    width: 320px;
margin-left: 35px;
  height: 44px;
  border-bottom: 1px solid #c0c0c0;
}
.a1 li{
    line-height: 44px;
}
.a1 li:nth-of-type(1) {
  float: left;
}
.a1 li:nth-of-type(2) {
  float: right;
}
footer {
  width: 100%;
  height: 40px;
  background: #00cccc;
  position: fixed;
  left: 0;
  bottom: 0;
  text-align: center;
  line-height: 40px;
  color: white;
}
.a4{
    color: #FF6600;
}
.t1{
    width: 320px;
    height: 44px;
    border: 1px solid khaki;
        margin-top: 10px;
        margin-left: 10px;

}
.van-cell {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 94%;
    padding: 10px 16px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
    /* border: 1px; */
    border: 1px solid red;
    margin-left: 12px;
}
</style>
